<template>
  <view class="custom-button" @click="navigateTo">
    <image class="button-image" :src="imageSrc" mode="aspectFill"></image>
    <text class="button-text">{{ text }}</text>
  </view>
</template>

<script>
export default {
  props: {
    imageSrc: {
      type: String,
      required: true
    },
    text: {
      type: String,
      required: true
    },
    url: {
      type: String,
      required: true
    }
  },
  methods: {
    navigateTo() {
      uni.navigateTo({
        url: this.url
      });
    }
  }
}
</script>

<style scoped>
.custom-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; /* 调整为较小的宽度以适应每行两个按钮 */
  height: 100px; /* 根据需要调整高度 */
  margin: 1%; /* 添加外边距以防止按钮紧贴在一起 */
  border-radius: 15px; /* 添加圆角效果 */
  overflow: hidden; /* 确保内容不会溢出圆角边界 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 可选：添加阴影效果 */
}
 
.button-image {
  width: 100%;
  height: 100%;
  border-radius: inherit; /* 继承父容器的圆角 */
}
 
.button-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white; /* 根据背景图片调整文字颜色 */
  font-size: 16px; /* 根据需要调整字体大小 */
  font-weight: bold; /* 根据需要调整字体样式 */
  text-align: center; /* 确保文字在按钮内居中 */
  width: 100%; /* 确保文字覆盖整个按钮宽度（如果需要的话） */
  white-space: nowrap; /* 防止文字换行 */
}
</style>